<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 </title>
</head>
<body>
    <h1><center>用户登录</center></h1>
    <hr>
    <p><center>用户名：<input type="text"></center></p >
    <p><center>密  码：<input type="password"></center></p >
    <p><center>验证码：<input type="text" id="userCode"> <input type="text" readonly id="yanzhengma"
        onclick="creatRandCode()"></center></p >
    <center><input type="button" value="登录" onclick="checkLogin()"></center>

</body>
<ml>

<script>
// 将生成验证码，定义成一个独立的函数
function creatRandCode(){
    /*随机生成四位随机数，到文本框*/
    // 生成
    var code = Math.floor(Math.random() * 9000) + 1000;
    var obj=document.getElementById("yanzhengma");
    //设置输入框里面的内容
    obj.value=code;

}

// 定义登录校验方法checkLogin()
function checkLogin(){
    // 1.判断用户输入的验证码是否与生成的一致
    var code1=document.getElementById("userCode").value;
    var code2=document.getElementById("yanzhengma").value;
    if(code1!=code2) {
        alert("验证码输入错误请重新输入！")
        creatRandCode(); 
    }

}
// 加载的时候首次调用生成验证码的函数
creatRandCode();



</script>